var mainData
var baseUrl = "http://58.33.201.244"
var webSocketUrl = "ws://58.33.201.244"
$(function () {
    var toggle12_2 = [1, 2, 3, 4, 5, 6, 7, 8, 9]; //6分屏
    createGridLayout6_2(toggle12_2);
    getInitBaojData();
    setInterval(() => {
        getAlarmData()
    }, 3000);

})

function getInitBaojData() {
    $.ajax(baseUrl + ":10810/api/v1/stats", {
        method: 'GET',
        data: {},
        headers: {
            "content-type": "application/json"
        },
        success: function (result) {
            mainData = result
            document.getElementById("num1").innerHTML = mainData.EnabledChannelCount
            document.getElementById("num2").innerHTML = mainData.EnabledChannelCount - mainData.OnlineChannelCount
            // initwebsoket()
            getAlarmData()

        },
        error: function (err) {
            console.log(err);
        }
    })
}

var ws;

function initwebsoket() {

    ws = new WebSocket(webSocketUrl + ":8091/webSocket/1733739398828335104");

    ws.onopen = function () {
        console.log("onopen");
    };

    ws.onmessage = function (e) {

        console.log("onmessage: " + e.data);
        if (e.data == 'update') {

            // $.ajax(baseUrl + ":8091/dev-device-instance/getPropertyVideoList", {
            //     method: 'GET',
            //     params: {
            //         alarmId: "",
            //         size: 6,
            //     },
            //     headers: {
            //         "content-type": "application/json",
            //     },
            //     success: function (result) {
            //         if (result.code == 200) {
            //             var list = result.data.list.records
            //             for (let i = 0; i < list.length; i++) {
            //                 document.getElementById("videobao" + i).videoUrl = list[i].url

            //             }

            //         }
            //     },
            //     error: function (err) {
            //         console.log(err);
            //     }
            // })



        }
    };

    ws.onclose = function () {
        console.log("onclose");
    };
    ws.onerror = function (e) {

        console.log(e)
    };
}
var DeviceDatalist = []

function getAlarmData() {
    var datap = {
        deviceId: "",
        size: 10,
    }

    $.ajax(baseUrl + ":8091/dev-device-instance/getListDeviceAlarm", {
        method: 'GET',
        data: (datap),
        headers: {
            "content-type": "application/json",
        },
        success: function (result) {
            DeviceDatalist = []
            if (result.code == 200) {
                DeviceDatalist = result.data.list.records
                DeviceDatalistfun()
                panduanbaojin()


            }
        },
        error: function (err) {
            console.log(err);
        }
    })

}


function DeviceDatalistfun() {
    var html = "<div style='height:40px;color: aqua;display: flex;'>" +
        " <div style='display: block;margin-left:100px;width:200px;'>报警时间</div><div style='display: block;width:200px;margin-left:100px'>报警数据</div><div style='display: block;width:200px;margin-left:50px;'>报警级别</div><div style='display: block;width:200px;margin-left:100px;'>操作</div></div>";
    html += '<div style="border-bottom: 1px dotted aqua;background-color:aqua;width: 100%;margin-top:10px;margin-bottom:10px"></div>'
    for (let i = 0; i < DeviceDatalist.length; i++) {


        html += "<div style='height: 40px;display: flex;line-height:50px;'>";
        html += '<img src="./alarm.png" alt="" srcset="" style="width:40px;height: 40px;" id="baoji' + i + '">';
        html += '<div style="color: aqua;margin-left:20px;width:300px;">' + formatTime(DeviceDatalist[i].alarmTime) + '</div>';
        html += '<div style="color: aqua;width:280px;">' + DeviceDatalist[i].alarmName + '</div>';
        html += '<div style="color: aqua;width:200px;">' + fotmatDescription(DeviceDatalist[i].description) + '</div>';
        html += "<div style='height: 40px;width: 60px;background-color: rgba(0, 0, 0, 0.5);box-shadow: 15px 0px 15px 0px rgba(0, 0, 0, 0.5);" +
            "color: #fff;font-size: 20px;cursor: pointer;margin-left:180px' onclick='chulibaojibyid(" + JSON.stringify(DeviceDatalist[i]) + ")'>" +
            "处理" +
            "</div>";
        // html += '<img src="./alarm.png" alt="" srcset="" style="width:40px;height: 40px;float:right;right: 10px;">';


        html += '</div>';
        html += '<div style="border-bottom: 1px dotted aqua;background-color:aqua;width: 100%;margin-top:10px;margin-bottom:20px"></div>'
    }
    document.getElementById("meagrsbaoj").innerHTML = (html);
}

function chulibaojibyid(val) {
    panduanbaojin2(val)
    $.ajax(baseUrl + ":8091/dev-device-instance/updateAlarm?ids=" + val.id, {
        method: 'get',
        data: {

        },
        headers: { 'Content-Type': "application/json" },
        success: function (r) {
            if (r.code == 200) {
                getAlarmData()

            }
        },
        error: function (err) {
            console.log(err);
        }
    })
}

// 动态创建视频容器
function createGridLayout6_2(layout) {
    var container = document.getElementById("container4");
    // 清空容器
    container.innerHTML = "";
    // 动态创建class
    container.className = "play" + layout.length;
    // 根据布局创建视频元素并添加到容器中
    for (var i = 0; i < layout.length; i++) {
        var video = createVideoElement6_2(i);
        video.className = "grid-item12";
        container.appendChild(video);
    }
}
// 动态创建video标签
function createVideoElement6_2(id) {
    var video = document.createElement("live-player");
    video.id = "videobao" + id;
    video.videoUrl = ""
    video.loop = true
    video.controls = false
    return video;
}